<<template>
    <x-button plain type="primary" class="custom-primary-red" :disabled="isClick" @click.native="vbtnclick" >{{content}}</x-button>
</template>
<script>
import { XButton } from "vux";
export default {
  components: {
    XButton
  },
  data() {
    return {
      content: "正在初始化……",
      endTimeLong:'',
      isClick:false
    };
  },
  props: {
    
    Data:{
      type:Object
    },
    keyData: {
      type: String,
      default: "123456"
    },
    indexData:{
      type:Number,
      default:0
    }
  },
  mounted() {
    
    if (this.endTimeLong == "") {
      let time = localStorage.getItem(this.keyData);
      
      this.endTimeLong = time;
      if (time == null || time == undefined) {
        this.endTimeLong = 0;
      } 
    }
    this.countdowm(this.endTimeLong);
  },
  methods: {
    countdowm(timestamp) {
     
      let timer = setInterval(() => {
        let nowTime = new Date();
        let endTime = new Date(parseFloat(timestamp));
     
        let t = endTime.getTime() - nowTime.getTime();
        
        if (t > 0) {
          let day = Math.floor(t / 86400000);
          let hour = Math.floor((t / 3600000) % 24);
          let min = Math.floor((t / 60000) % 60);
          let sec = Math.floor((t / 1000) % 60);
          hour = hour < 10 ? "0" + hour : hour;
          min = min < 10 ? "0" + min : min;
          sec = sec < 10 ? "0" + sec : sec;
          let format = "";
          if (day > 0) {
            format = `${day}天${hour}小时${min}分${sec}秒`;
          }
          if (day <= 0 && hour > 0) {
            format = `${hour}小时${min}分${sec}秒`;
          }
          if (day <= 0 && hour <= 0) {
            format = `${min}分${sec}秒`;
          }
          this.content = this.Data.mingc+"(" + format+")";
          this.isClick = true
        } else {
          clearInterval(timer);
          this.content = this.Data.mingc;
          this._callback();
        }
      }, 1000);
    },
    _callback() {
      // if (this.callback && this.callback instanceof Function) {
      //   this.callback(...this,indexData);
      // }
      this.isClick = false;
      localStorage.removeItem(this.keyData);
       this.$emit("callback",this.indexData);
    },
    vbtnclick(){
      // if (this.vOnClick && this.vOnClick instanceof Function) {
      //   this.vOnClick(...this,Data,indexData);
      // }
      this.$emit("vOnClick",this.Data,this.indexData);
    },
    setEndTime(_time){
      console.log(_time);
      this.endTimeLong = _time;
       
       
        console.log(this.keyData+"s:"+_time)
      localStorage.setItem(this.keyData, this.endTimeLong);
      this.countdowm(_time)
    }
  }
};
</script>
<style lang="less">
.custom-primary-red {
  border-radius: 99px !important;
  border-color: #ffa500 !important;
  color: #ffa500 !important;

  &:active {
    border-color: rgba(206, 60, 57, 0.6) !important;
    color: rgba(206, 60, 57, 0.6) !important;
    background-color: transparent;
  }
}
</style>

